<!--
 * @Author: jhw
 * @Date: 2025-08-04 22:58:44
 * @LastEditors: jhw
 * @LastEditTime: 2025-08-15 19:34:16
 * @Description:
-->
<template>
  <div>
    <div class="header">
      <Header />
    </div>
    <!-- 编辑器主体区域 -->
    <div class="containers">
      <LeftSide />
      <RightSide />
    </div>
    <div>
      <Center />
    </div>
  </div>
</template>

<script setup lang="ts">
import Header from '@/components/Common/Header.vue';
import LeftSide from '@/views/EditorView/LeftSide/Index.vue';
import Center from '@/views/EditorView/Center.vue';
import RightSide from '@/views/EditorView/RightSide.vue';
import { computed, onMounted, provide } from 'vue';
import type { EditorStore, OptionsStatus, PicLink, TypeStatus } from '@/types';
import { useEditorStore } from '@/stores/useEditor';
import { useRoute } from 'vue-router';
import { getSurveyById } from '@/api';
import { restoreSurvey } from '@/utils/effect';
import { dispatch } from '@/stores/dispatch';
const editorStore = useEditorStore() as unknown as EditorStore;
const route = useRoute();
const id = route.query.id as string; // 问卷id
const currentMaterialCom = computed(() => editorStore.coms[editorStore.currentComponentIndex]);

const updateStatus = (configKey: string, payload?: number | string | boolean | PicLink) => {
  // 修改仓库中的状态
  dispatch(
    editorStore,
    currentMaterialCom.value.status as unknown as OptionsStatus | TypeStatus,
    configKey,
    payload,
  );
};

const getLink = (link: PicLink) => {
  updateStatus('options', link);
};

provide('getLink', getLink);
provide('updateStatus', updateStatus);

const getSurvey = async () => {
  editorStore.resetComs();
  if (!id) return;
  const { code, data } = await getSurveyById(id);
  if (code === 200) {
    restoreSurvey(data.components);
    editorStore.setComs(data);
  }
};

onMounted(() => {
  getSurvey();
});
</script>

<style scoped lang="scss">
.header {
  @apply w-full bg-white fixed top-0 z-10;
}
.containers {
  @apply fixed top-50px p-20px;
  width: calc(100vw - 40px);
  // Header的高度50px
  height: calc(100vh - 50px);
  background: url('@/assets/imgs/editor_background.png');
}
</style>
